<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
    />

    <title>手机充电特效</title>
    <link rel="stylesheet" href="index.css" />

    <link rel="icon" type="image/x-icon" href="../../../favicon.ico" />
</head>

  <body>
    <div class="box">
      <div class="number" id="batteryLevel">0.00%</div>
      <div class="contrast">
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble-home"></div>
        <div class="circle"></div>
      </div>
    </div>

    <script>
      // 电池电量变化动画
      class BatteryAnimation {
        constructor() {
          this.batteryElement = document.getElementById('batteryLevel');
          this.currentLevel = 0;
          this.targetLevel = 100;
          this.isCharging = true;
          this.isPaused = false;
          this.animationSpeed = 0.1; // 充电速度
          this.updateInterval = null;
          this.lastLevel = 0;
          this.init();
        }

        init() {
          this.startCharging();
          this.addEventListeners();
        }

        addEventListeners() {
          // 点击切换暂停/继续
          this.batteryElement.addEventListener('click', () => {
            this.togglePause();
          });

          // 双击重置
          this.batteryElement.addEventListener('dblclick', () => {
            this.reset();
          });

          // 键盘控制
          document.addEventListener('keydown', (e) => {
            switch(e.key) {
              case ' ':
                e.preventDefault();
                this.togglePause();
                break;
              case 'r':
              case 'R':
                this.reset();
                break;
            }
          });
        }

        togglePause() {
          this.isPaused = !this.isPaused;
          if (this.isPaused) {
            this.batteryElement.classList.add('paused');
            this.batteryElement.title = '点击继续 (空格键暂停/继续，R键重置)';
          } else {
            this.batteryElement.classList.remove('paused');
            this.batteryElement.title = '点击暂停，双击重置 (空格键暂停/继续，R键重置)';
          }
        }

        reset() {
          this.currentLevel = 0;
          this.targetLevel = 100;
          this.isCharging = true;
          this.isPaused = false;
          this.animationSpeed = 0.1;
          this.batteryElement.classList.remove('paused', 'fully-charged', 'discharging');
          this.batteryElement.title = '点击暂停，双击重置 (空格键暂停/继续，R键重置)';
        }

        startCharging() {
          this.updateInterval = setInterval(() => {
            if (this.isPaused) return;

            if (this.isCharging) {
              // 充电过程
              this.currentLevel += this.animationSpeed;
              if (this.currentLevel >= this.targetLevel) {
                this.currentLevel = this.targetLevel;
                this.isCharging = false;
                // 充满电特效
                this.showFullyChargedEffect();
                // 充满后开始放电
                setTimeout(() => {
                  this.startDischarging();
                }, 3000);
              }
            } else {
              // 放电过程
              this.currentLevel -= this.animationSpeed;
              if (this.currentLevel <= this.targetLevel) {
                this.currentLevel = this.targetLevel;
                this.isCharging = true;
                this.targetLevel = 100;
                this.animationSpeed = 0.1;
                // 放完电后开始充电
                setTimeout(() => {
                  this.startCharging();
                }, 1000);
              }
            }
            this.updateDisplay();
          }, 50);
        }

        showFullyChargedEffect() {
          this.batteryElement.classList.add('fully-charged');
          setTimeout(() => {
            this.batteryElement.classList.remove('fully-charged');
          }, 2000);
        }

        startDischarging() {
          this.isCharging = false;
          this.targetLevel = 0;
          this.animationSpeed = 0.05; // 放电速度稍慢
        }

        updateDisplay() {
          // 格式化显示，保留两位小数
          const displayLevel = this.currentLevel.toFixed(2);
          this.batteryElement.textContent = `${displayLevel}%`;
          
          // 根据电量改变颜色和动画
          this.updateColor();
          this.updateAnimation();
          
          // 更新提示信息
          this.updateTooltip();
        }

        updateColor() {
          let color;
          if (this.currentLevel < 20) {
            color = '#ff4444'; // 红色 - 电量低
          } else if (this.currentLevel < 50) {
            color = '#ffaa00'; // 橙色 - 电量中等
          } else if (this.currentLevel < 80) {
            color = '#ffff00'; // 黄色 - 电量较高
          } else {
            color = '#00ff00'; // 绿色 - 电量充足
          }
          this.batteryElement.style.color = color;
        }

        updateAnimation() {
          // 移除所有状态类
          this.batteryElement.classList.remove('charging', 'low-battery', 'discharging');
          
          // 根据状态添加相应的动画类
          if (this.isCharging && this.currentLevel < 100) {
            this.batteryElement.classList.add('charging');
          } else if (this.currentLevel < 20) {
            this.batteryElement.classList.add('low-battery');
          } else if (!this.isCharging && this.currentLevel > 0) {
            this.batteryElement.classList.add('discharging');
          }
        }

        updateTooltip() {
          let tooltip = `电量: ${this.currentLevel.toFixed(1)}%`;
          if (this.isCharging) {
            tooltip += ' (充电中)';
          } else if (this.currentLevel > 0) {
            tooltip += ' (放电中)';
          }
          tooltip += '\n点击暂停，双击重置\n空格键暂停/继续，R键重置';
          this.batteryElement.title = tooltip;
        }
      }

      // 页面加载完成后启动动画
      document.addEventListener('DOMContentLoaded', () => {
        const batteryAnim = new BatteryAnimation();
        
        // 设置初始提示
        batteryAnim.batteryElement.title = '点击暂停，双击重置 (空格键暂停/继续，R键重置)';
        
        // 添加键盘提示
        console.log('💡 提示: 按空格键暂停/继续，按R键重置');
      });
    </script>
  </body>
</html>
